//-------------------------------数据逻辑
//处理数据时需要用到的数据对象
const data = {
	lrc:lrc,
	// 自定义数组
	lrcArr:[]
}

/**
 * 格式化歌词，成可读的对象｛time：'',word:''｝
 */
function parseLrc(){
	// 歌词换行
	const lrcLine = data.lrc.split('\n')
	lrcLine.forEach(i =>{
		// 分割时间和歌词
		const parts = i.split(']')
		const lrcObj = {
			time:parseTime(parts[0].substring(1)),
			word:parts[1]
		}
		// 加入时间和歌词
		data.lrcArr.push(lrcObj)
	})
	console.log(data.lrcArr)
}

/**
 * 格式化时间
 * @param {Object} timeStr
 */
function parseTime(timeStr){
	const parts = timeStr.split(':')
	timeStr = (+parts[0]*60 + (+parts[1])).toFixed(2)/* 2为余数为2 */
	return timeStr
}

parseLrc()

//-----------------------------界面逻辑
//界面逻辑中需要使用的dom对象
const doms = {
	ul:document.querySelector('.lrc_list'),
	audio:document.querySelector('.play_box'),
	lrcBox:document.querySelector('.lrc_box')
}

//界面逻辑中需要使用的数据对象
const uiData = {
	currentIndex: - 1,
	liHeight:0,
	lrcBoxHeight:doms.lrcBox.clientHeight
}

/**
 * 初始化页面
 */
function initPage(){
	// forEach循环结束后才执行return
	data.lrcArr.forEach(lrc => {
		const li = document.createElement('li')
		// 添加liclass
		li.classList.add('lrc_text')
		/* textContent类似innerHTML */
		li.textContent = lrc.word
		doms.ul.appendChild(li)
	})
	uiData.liHeight = doms.ul.children[0].clientHeight
}

/**
 * 找到当前时间应该高亮歌词的下标
 */
function findCurrentIndex(){
	// 获取audio时间currentTime
	const currentTime = doms.audio.currentTime
	for (let index in data.lrcArr) {
		const lrc = data.lrcArr[index]
		if(currentTime < lrc.time){
			uiData.currentIndex = index-1
			return
		}
	}
	uiData.currentIndex = data.lrcArr.length-1
}

/**
 * 显示当前高亮歌词
 */
function showLrc(){
	findCurrentIndex()
	if(uiData.currentIndex<=-1){
		return
	}
	const oldLi = document.querySelector('.lrc_text_active')
	// 删除原来高亮显示
	oldLi?oldLi.classList.remove('lrc_text_active'):1
	const li = doms.ul.children[uiData.currentIndex]
	// 添加高亮显示
	li.classList.add('lrc_text_active')
}



function setUloffset(){
	showLrc()
	let height = uiData.liHeight*uiData.currentIndex + uiData.liHeight/2 - uiData.lrcBoxHeight/2
	if(height < 0){
		height = 0
	}
	doms.ul.style.transform = `translateY(-${height}px)`
	console.log(height);
}
initPage()
//--------------------------------------事件逻辑
doms.audio.addEventListener('timeupdate',function(){
	setUloffset()
})

// 快进快退
document.addEventListener('keydown',function(e){
	if(e.keyCode == 37){
		doms.audio.currentTime -=5
	}else if(e.keyCode == 39){
		doms.audio.currentTime -=5
	}
})